<script setup>
import { ref } from 'vue';
const tableData = [];
const elradio = ref(true);
</script>

<template>
  <div class="relative pr-312px">
    <div class="user">
      <div class="header">
        <span>👏 欢迎回来，Ryan Septimus</span>
      </div>
      <div class="views">
        <div class="views-box">
          <div style="height: 54px; border-right: 1px solid #f2f3f5; width: 100%; display: flex">
            <div style="margin-right: 12px">
              <ElImage class="image" src="/src/assets/images/book.png" mode="scaleToFill" />
            </div>
            <div>
              <div class="title" style="margin-bottom: 8px">今日订单</div>
              <div style="padding-right: 12px; font-weight: bold; font-size: 24px">
                3500
                <span class="title unit">单</span>
              </div>
            </div>
          </div>
        </div>
        <div class="views-box">
          <div style="height: 54px; border-right: 1px solid #f2f3f5; width: 100%; display: flex">
            <div style="margin-right: 12px">
              <ElImage class="image" src="/src/assets/images/workbenches/test.png" mode="scaleToFill" />
            </div>
            <div>
              <div class="title" style="margin-bottom: 8px">销售中的店铺</div>
              <div style="padding-right: 12px; font-weight: bold; font-size: 24px">
                3500
                <span class="title unit">单</span>
              </div>
            </div>
          </div>
        </div>
        <div class="views-box">
          <div style="height: 54px; border-right: 1px solid #f2f3f5; width: 100%; display: flex">
            <div style="margin-right: 12px">
              <ElImage class="image" src="/src/assets/images/workbenches/comments.png" mode="scaleToFill" />
            </div>
            <div>
              <div class="title" style="margin-bottom: 8px">今日销售额</div>
              <div style="padding-right: 12px; font-weight: bold; font-size: 24px">
                3500
                <span class="title unit">单</span>
              </div>
            </div>
          </div>
        </div>
        <div class="views-box">
          <div style="height: 54px; width: 100%; display: flex">
            <div style="margin-right: 12px">
              <ElImage class="image" src="/src/assets/images/workbenches/weight.png" mode="scaleToFill" />
            </div>
            <div>
              <div class="title" style="margin-bottom: 8px">较昨日新增</div>
              <div style="padding-right: 12px; font-weight: bold; font-size: 24px">
                2.8%
                <span class="title unit">单</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="popular_products">
      <div class="left" style="margin-right: 8px">
        <div class="title">
          <span class="left-title">线上热门产品</span>
          <span class="more"></span>
        </div>
        <div class="product-list">
          <div class="product-button">
            <ElRadioGroup
              v-model="elradio"
              style="display: flex; justify-content: space-around; align-items: center; height: 100%"
            >
              <ElRadioButton
                :value="true"
                label="GMV"
                size="small"
                style="width: 54px; border-radius: 2px; color: #f2f3f8"
                class="button"
              />
              <ElRadioButton
                :value="false"
                label="单量"
                size="small"
                style="width: 54px; border-radius: 2px; color: #f2f3f8"
                class="button"
              />
            </ElRadioGroup>
          </div>
          <ElTable :data="tableData" style="width: 100%">
            <ElTableColumn prop="date" label="排名" width="52" />
            <ElTableColumn prop="name" label="产品标题" />
            <ElTableColumn prop="address" label="销售额" width="83" />
            <ElTableColumn prop="address1" label="日涨幅" width="100" sortable />
          </ElTable>
        </div>
      </div>
      <div class="order-list">
        <div class="title" style="padding-bottom: 12px"><span>补货提醒</span></div>
        <ElTabs v-model="activeName" class="tabs" @tab-click="handleClick">
          <ElTabPane label="7天" name="second"></ElTabPane>
          <ElTabPane label="30天" name="third"></ElTabPane>
          <ElTabPane label="90天" name="fourth"></ElTabPane>
        </ElTabs>
        <ElTable :data="tableData" style="width: 100%">
          <ElTableColumn prop="date" label="SKU" />
          <ElTableColumn prop="name" label="销量" width="76" />
          <ElTableColumn prop="address" label="当前库存" width="96" />
          <ElTableColumn prop="address1" label="建议补充" width="83" />
        </ElTable>
      </div>
    </div>
    <el-space class="right" direction="vertical" :size="16">
      <div class="bg-white">
        <div style="width: 100%; height: 94px">
          <!-- TODO -->
          <div class="views-box" style="width: 100%; display: flex">
            <div style="height: 54px; width: 100%; display: flex; justify-content: center">
              <div style="margin-right: 12px">
                <ElImage class="image" src="/src/assets/images/workbenches/weight.png" mode="scaleToFill" />
              </div>
              <div>
                <span class="title" style="margin-bottom: 8px">货款余额</span>
                <span style="padding-right: 12px; font-weight: bold; font-size: 24px">24.01M</span>
              </div>
            </div>
          </div>
        </div>
        <div
          class="quickEntrance"
          style="height: 85px; border: no; margin-top: 16px; width: 280px; display: flex; justify-content: space-between"
        >
          <div v-for="(item, index) in 3" :key="index" class="quickEntrance-item">
            <ElImage src="/src/assets/images/language.png" class="quickEntrance-item-img"></ElImage>
            <span>店铺管理</span>
          </div>
        </div>

        <div class="title" style="margin-top: 16px; margin-bottom: 16px"><span>待办事项</span></div>
        <div
          class="quickEntrance"
          style="height: 85px; border: no; width: 180px; display: flex; justify-content: space-between"
        >
          <div v-for="(item, index) in 2" :key="index" class="quickEntrance-item">
            <ElImage src="/src/assets/images/language.png" class="quickEntrance-item-img"></ElImage>
            <span>店铺管理</span>
          </div>
        </div>
      </div>

      <div class="notice">
        <div class="title">
          <span>公告</span>
          <span>查看更多</span>
        </div>
        <div class="notice-content">
          <div class="notice-content-info">
            <span class="info-title">活动</span>
            <span class="info-content">关于元旦不发货问题</span>
          </div>
          <div class="notice-content-info">
            <span class="info-title">活动</span>
            <span class="info-content">关于元旦不发货问题</span>
          </div>
          <div class="notice-content-info">
            <span class="info-title">活动</span>
            <span class="info-content">关于元旦不发货问题</span>
          </div>
          <div class="notice-content-info">
            <span class="info-title">活动</span>
            <span class="info-content">关于元旦不发货问题</span>
          </div>
          <div class="notice-content-info">
            <span class="info-title">活动</span>
            <span class="info-content">关于元旦不发货问题</span>
          </div>
        </div>
      </div>
    </el-space>
  </div>
</template>

<style lang="scss" scoped>
.user {
  margin-top: 7px;
  box-sizing: border-box;
  padding: 0 20px;
  background-color: white;
  justify-content: center;
  height: 177px;

  .header {
    display: flex;
    align-items: center;
    height: 71px;
    border-bottom: 1px solid #e5e8ef;
    border-radius: 4px;
  }

  .views {
    height: 95px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e5e8ef;
    border-radius: 4px;

    .views-box {
      display: flex;
      align-items: center;
      width: 208px;
      height: 94px;
      box-sizing: border-box;
    }

    .image {
      width: 54px;
      height: 54px;
    }

    .title {
      font-size: 12px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: 0px;
      color: #1d2129;
    }

    .unit {
      position: relative;
      top: -3px;
      right: -6px;
    }
  }
}

.popular_products {
  margin-top: 16px;
  height: 388px;
  display: flex;
  justify-content: space-between;

  .left {
    padding: 20px;
    box-sizing: border-box;
    width: 50%;
    height: 100%;
    background-color: white;
    border-radius: 4px;

    .title {
      display: flex;
      justify-content: space-between;
      padding: 0 0 16px 0;
      align-items: center;

      .left-title {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: #1d2129;
      }

      .more {
        font-size: 12px;
        color: #165dff;
      }
    }

    .product-button {
      margin-bottom: 10px;
      width: 130.5px;
      height: 28px;
      background: #f2f3f8;
    }

    .product-list-content {
      margin-top: 10px;
      height: 240px;
      width: 100%;
      background-color: red;

      .text {
        font-size: 14px;
        font-weight: 500;
      }
    }
  }

  .order-list {
    @extend .left;
    background-color: white;

    .title {
      height: 24px;
      display: flex;
      justify-content: space-between;
      padding: 0 0 16px 0;
      align-items: center;
    }
  }
}

.tabs {
  border-bottom: 0;
}

.right {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 280px;

  .image {
    margin-left: 15px;
    width: 54px;
    height: 54px;
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .title {
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: 0px;
    color: #1d2129;
  }

  .quickEntrance {
    width: 100%;
    height: 156px;
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px solid #f2f3f5;

    .quickEntrance-item {
      // flex: 0 0 33%;
      width: 64px;
      display: flex;
      justify-content: center;
      height: 64px;
      flex-direction: column;
      align-items: center;
      margin-right: 15px;

      .quickEntrance-item-img {
        width: 18px;
        height: 18px;
        margin-bottom: 16px;
      }

      span {
        font-size: 12px;
      }
    }
  }

  .views-box {
    display: flex;
    align-items: center;
    width: 208px;
    height: 94px;
    box-sizing: border-box;
  }
}

.notice {
  padding: 20px;
  width: 280px;
  height: 212px;
  border-radius: 4px;
  background: #ffffff;
  box-sizing: border-box;

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;

    span:nth-of-type(2) {
      font-size: 12px;
      color: #165dff;
    }
  }

  .notice-content {
    width: 188px;
    height: 20px;

    .notice-content-info {
      width: 100%;
      height: 20px;
      align-items: center;
      display: flex;
      margin-bottom: 8px;

      .info-title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 20px;
        color: #ff7d00;
        font-size: 14px;
        margin-right: 8px;
        background-color: #fff7e8;
      }

      .info-content {
        font-size: 14px;
        color: #4e5969;
      }
    }
  }
}
</style>

<style lang="scss">
// :root {
//     --el-color-primary: white
// }
.order-list .el-tabs__item {
  height: 22px;
  // width: 45px;
}

.order-list .el-tabs__nav-wrap:after {
  background-color: white !important;
}

.el-radio-button__inner {
  background: #f2f3f8 !important;
  border: none !important;
  --el-color-primary: white !important;
}

.is-active .el-radio-button__inner {
  // border: none !important;
  color: #1664ff !important;
  background: white !important;
  // border-color: white !important
}
.left {
  .el-table {
    --el-table-header-bg-color: #f2f3f8 !important
;
  }

  .el-table thead {
    font-size: 14px;
    color: #1d2129;
    font-weight: 500;
  }
}
</style>
